<template>
	<div class="app-container">
		<el-row class='content-container'>
			<span class="label-titile">学员姓名</span>
			<el-input v-model="reqData.realName" placeholder="请输入课程名称" style="width:200px" @keyup.enter.native="search"></el-input>
			
			<el-button type="primary" @click="search">搜索</el-button>
		</el-row>
		<el-row class="content-container">
			<el-table :data="list" style="width: 100%">
				<!--<el-table-column prop="id" label="ID" align="center"></el-table-column>-->
				<el-table-column prop="branchCompany" label="企业名称" align="center"></el-table-column>
				<el-table-column prop="department" label="部门" align="center"></el-table-column>
				<el-table-column prop="profession" label="职务" align="center"></el-table-column>
				<el-table-column prop="realName" label="学员姓名" align="center"></el-table-column>
				<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
				<el-table-column prop="mobile" label="手机" align="center"></el-table-column>
				<el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
				<el-table-column prop="startTime" label="起始日期" align="center"></el-table-column>
				<el-table-column prop="endTime" label="截止日期" align="center"></el-table-column>
				<el-table-column prop="endTime" label="学习进度" align="center"></el-table-column> 	 	 
				<el-table-column label="学习进度" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.userProgress}}/{{scope.row.totalProgress}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="score" label="总成绩" align="center"></el-table-column> 
				
			</el-table>
		</el-row>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :page-count="totalPageSize" :page-sizes="[10, 20, 30, 50]" :page-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import { getLearnSituation} from '@/api/course'
	export default {
		data() {
			return {
				list: [],
				totalPageSize: 0,
				totalResultSize: 0,
				reqData: {
					currentPage: 1,
					orderDetailId:"",
					realName:"",
				},
				options: [],
			}
		},
		created(){
			let query = this.$route.query;
			this.reqData.orderDetailId = query.id;
			this.getList(this.reqData);
		},
		methods: {
			getList(data){
				getLearnSituation(data).then((res)=>{
					this.list = [...res.result];
					this.totalPageSize = res.page.totalPageSize;
					this.totalResultSize = res.page.totalResultSize;
				})
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getList(this.reqData);	
				
			},
			resetCurrent(){
				this.reqData.currentPage = 1;
			},
			search(){
				this.resetCurrent();
				this.getList(this.reqData);	
			},
		}
	}
</script>

<style>
</style>